<template>
	<view>
		<!-- header -->
		<view class="header">
			<view class="nav-title contentwidth">
				<view class="nav-title-icons">
					<uni-icons type="back" size="25" color="#FFFFFF"></uni-icons>
				</view>
				<view>订单结算</view>
			</view>
			<view class="nav-bg contentwidth">
				<view class="nav-bg-title">自提</view>
				<view class="nav-bg-desc font24-5">距离您很近哟</view>
			</view>
			<view class="shop contentwidth">
				<view class="shop-name">{{curOrder.shop.sname}}</view>
				<view class="shop-address font29-7">{{curOrder.shop.saddress}}</view>
				<view class="shop-taketime">
					<view>自提时间</view>
					<view style="display: flex;color: red;">立即取餐<uni-icons type="forward" size="18" color="#333333;">
						</uni-icons>
					</view>
				</view>
			</view>
		</view>
		<!-- header -->


		<!-- 订单商品列表 -->
		<view class="goodslist-goods contentwidth">
			<view class="mygoodslist" v-for="(item,index) in curOrder.goods" :key="index">
				<view class="mygoodslist-img-v">
					<image class="mygoodslist-img" :src="item.icon"></image>
				</view>
				<view class="mygoodslist-desc">
					<view class="mygoodslist-desc-left">
						<view class="mygoodslist-desc-left-name">{{item.name}}</view>
						<view class="mygoodslist-desc-left-bcontent">{{item.bcontent}}</view>
						<view class="mygoodslist-desc-left-bcontent" style="padding-top: 20rpx;"><text
								style="font-size: 20rpx;" decode="yes">X&nbsp;</text>{{item.buyNums}}</view>
					</view>
					<view class="mygoodslist-desc-right">￥{{item.buyPrice}}</view>
				</view>
			</view>
			<view class="goodslist-goods-coupon">
				<text class="font29-3">优惠劵</text>
				<text class="font29-7">暂无可用</text>
			</view>
			<!-- 总结 -->
			<view class="total">
				<view><text class="total-text">共{{curOrder.buyTotalNums}}件，合计</text>
					<text class="total-totalprice">￥{{curOrder.allPrice}}</text>
				</view>
			</view>
			<!-- 总结 -->
		</view>
		<!-- 订单商品列表 -->

		<!-- 备注 -->
		<view class="beizhu contentwidth">
			<view class="font29-5">备注</view>
			<view class="font29-7">暂不支持通过备注定制口味</view>
		</view>
		<view style="height: 150rpx;"></view>
		<!-- 备注 -->

		<!-- 支付按钮 -->
		<view class="pay">
			<view class="pay-text"><text class="pay-text1">实付：</text><text class="pay-text2">￥</text><text
					class="pay-text3">{{curOrder.allPrice}}</text></view>
			<view><button class="pay-confirm" @click="payconfirm">确认支付</button></view>
		</view>
		<!-- 支付按钮 -->
	</view>
</template>

<script>
	import fDate from "@/common/utils/formatDateUtil.js"
	const app = getApp()
	export default {
		data() {
			return {
				curOrder: {
					shop: {
						sname: '',
						saddress: ''
					}
				}
			}
		},
		onLoad(params) {
			if (params.orderid != undefined && params.orderid != null) {
				// 获得订单信息
				uni.request({
					url: getApp().globalData.baseUrl + '/orders/findById/' + params.orderid,
					success: (result) => {
						console.log(result)
						if (result.data.statusCode == 200 && result.data.mydata != null)
							this.curOrder = result.data.mydata
					}
				})
			}
		},
		methods: {
			payconfirm() {
				//确认支付吗？
				uni.showModal({
					title: "温馨提示",
					content: "您确定支付吗？",
					confirmText: "确认支付",
					cancelText: "稍后支付",
					success: (res) => {
						if (res.confirm) {
							this.curOrder.orderstatus = 1
							this.curOrder.orderstatusStr = "已支付"
							this.curOrder.paytime = fDate.formatTime(new Date())
							//取餐号码
							uni.request({
								url: getApp().globalData.baseUrl + '/takecode/gettakecode/' + this
									.curOrder
									.sid,
								success: (result) => {
									if (result.data.statusCode == 200 && result.data.data !=
										null) {
										this.curOrder.takeCode = result.data.data
									} else {
										this.curOrder.takeCode = 1000
									}

									// 已付
									uni.showToast({
										title: "取餐号码：" + this.curOrder.takeCode,
										duration: 6000
									})

									// 清空购物车
									uni.request({
										url: getApp().globalData.baseUrl +
											'/cart/delcart/' +
											this.curOrder.cartid
									})

									// 更新订单
									uni.request({
										url: getApp().globalData.baseUrl +
											'/orders/updateorders',
										method: 'POST',
										data: this.curOrder,
										success: (result) => {
											// 转向订单页面
											uni.reLaunch({
												url: "../orders/orders"
											})
										}
									})

								}
							})
						} else if (res.cancel) {
							// 转向订单页面
							uni.reLaunch({
								url: "../orders/orders"
							})
						}


					}
				})

			}
		}
	}
</script>

<style lang="scss">
	.contentwidth {
		width: 93vw;
		margin: 0rpx auto;
	}

	.font24-5 {
		font-size: 24rpx;
		color: #555555;
	}

	.font29-7 {
		font-size: 29rpx;
		color: #777777;
	}

	.font29-3 {
		font-size: 29rpx;
		color: #333333;
	}

	.header {
		width: 100vw;
		height: 500rpx;
		background: linear-gradient(#FC3F41 1%, #F8F8F8);

		.nav-title {
			height: 40rpx;
			padding-top: 60rpx;
			padding-bottom: 50rpx;
			display: flex;
			color: #FFFFFF;
			font-size: 36rpx;

			.nav-title-icons {
				width: 40%;
			}
		}

		.nav-bg {
			height: 100rpx;
			background: url(http://www.itlaobing.com/ice/other/nav.png) no-repeat;
			background-size: 100% 100%;
			display: flex;

			.nav-bg-title {
				width: 28%;
				height: 100rpx;
				color: #FC3F41;
				font-size: 32rpx;
				text-align: center;
				line-height: 90rpx;
			}

			.nav-bg-desc {
				width: 58%;
				height: 100rpx;
				text-align: center;
				line-height: 100rpx;
			}
		}

		.shop {
			height: 245rpx;
			background-color: #FFFFFF;
			border-bottom-left-radius: 20rpx;
			border-bottom-right-radius: 20rpx;
			box-sizing: border-box;
			padding: 25rpx;

			.shop-name {
				font-size: 32rpx;
				color: #333333;
				line-height: 60rpx;
			}

			.shop-address {
				height: 70rpx;
				line-height: 60rpx;
				border-bottom: 1px solid #F8F8F8;
			}

			.shop-taketime {
				width: 100%;
				height: 70rpx;
				font-size: 26rpx;
				line-height: 70rpx;
				display: flex;
				justify-content: space-between;
				color: #333333;
			}
		}
	}

	.beizhu {
		height: 100rpx;
		background-color: #FFFFFF;
		border-radius: 15rpx;
		box-sizing: border-box;
		padding: 25rpx;
		display: flex;
		justify-content: space-between;

	}

	.pay {
		width: 100vw;
		height: 60px;
		border-top: 1px solid #EEEEEE;
		position: fixed;
		bottom: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #FFFFFF;
		box-sizing: border-box;
		padding: 0 40rpx;

		.pay-text {
			height: 45px;
			line-height: 45px;
			background-color: #FFFFFF;

			.pay-text1 {
				font-size: 24rpx;
				color: #777777;
			}

			.pay-text2 {
				font-size: 24rpx;
				font-weight: bold;
				color: #333333;
			}

			.pay-text3 {
				font-size: 36rpx;
				font-weight: bold;
				color: #333333;
			}
		}

		.pay-confirm {
			width: 260rpx;
			height: 45px;
			background-color: #E60012;
			color: #FFFFFF;
			font-size: 34rpx;
		}
	}

	.goodslist-goods {
		margin: 15rpx auto;
		box-sizing: border-box;
		padding: 20rpx;
		background-color: #FFFFFF;
		border-radius: 15rpx;

		.mygoodslist {
			width: 100%;
			height: 150rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 5rpx auto;

			.mygoodslist-img-v {
				width: 28%;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;

				.mygoodslist-img {
					width: 120rpx;
					height: 125rpx;
				}
			}

			.mygoodslist-desc {
				width: 70%;
				height: 100%;
				display: flex;
				justify-content: space-between;

				.mygoodslist-desc-left-name {
					font-size: 30rpx;
					color: #333333;
					padding-bottom: 8rpx;
				}

				.mygoodslist-desc-left-bcontent {
					font-size: 24rpx;
					color: #555555;
				}

				.mygoodslist-desc-right {
					font-size: 26rpx;
				}
			}
		}

		.goodslist-goods-coupon {
			width: 100%;
			height: 90rpx;
			border-top: 1px dashed #CCCCCC;
			border-bottom: 1px dashed #CCCCCC;
			display: flex;
			justify-content: space-between;
			align-items: center;

		}

		.total {
			width: 100%;
			height: 80rpx;
			text-align: right;
			line-height: 80rpx;

			.total-text {
				font-size: 25rpx;
				color: #222222;
			}

			.total-totalprice {
				font-size: 32rpx;
				font-weight: bold;
			}

			.total-desc {
				color: orange;
				font-size: 24rpx;
			}

			.total-desc2 {
				color: #888888;
				font-size: 24rpx;
			}
		}
	}
</style>
